<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/home.css">
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
    <div class="body">
        <!-- 头部 -->
        <header>
            <div class="wrap">
                <div class="header-left left">
                    <ul>
                        <li>中国大陆</li>
                        <li>亲，请登录</li>
                        <li>免费注册</li>
                        <li>手机逛淘宝</li>

                    </ul>
                </div>
                <div class="header-right right">
                    <ul>
                        <li>淘宝网首页</li>
                        <li>我的淘宝</li>
                        <li>购物车</li>
                        <li>收藏夹</li>
                        <li>商品分类</li>
                        <li>卖家中心</li>
                        <li>联系客服</li>
                        <li>网站导航</li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>

        </header>
        <!-- 中间 -->
        <article>
            <div class="wrap">
                <div class="head">
                    <div class="container">
                        <!-- 搜索 -->
                        <div class="row top">
                            <div class="col-md-2 logo">
                                <h3>淘宝</h3>
                                <h5>Taobao</h5>
                            </div>
                            <div class="col-md-8">
                                <ul class="search">
                                    <li class="kinds">宝贝</li>
                                    <li>
                                        <input type="text" name="" id="" placeholder="夏季爆款裙子">
                                    </li>
                                    <li>
                                        <input type="button" value="搜索">
                                    </li>
                                    <div class="clear"></div>
                                </ul>
                                <ul class="search_bottom">
                                    <li>新款连衣裙</li>
                                    <li>四件套</li>
                                    <li>潮流T恤</li>
                                    <li>时尚女鞋</li>
                                    <li>短裤</li>
                                    <li>半身裙</li>
                                    <li>男士外套</li>
                                    <li>墙纸</li>
                                    <li>行车记录仪</li>
                                    <li>新款男鞋</li>
                                    <li>耳机</li>
                                    <li>时尚女包</li>
                                    <li>沙发</li>
                                    <div class="clear"></div>
                                </ul>
                            </div>
                            <div class="col-md-2">
                                <div class="core">
                                    <span>去领红包</span>
                                    <img src="./img/core.png" alt="">
                                </div>
                            </div>
                        </div>
                        <!-- 导航栏 -->
                        <div class="row nav">
                            <div class="col-md-2">
                                <div class="nav_left">
                                    <h5>主题市场</h5>
                                    <ul class="list">
                                        <li>
                                            <a href="">女装</a>
                                            <span class="line">/</span>
                                            <a href="">内衣</a>
                                            <span class="line">/</span>
                                            <a href="">家居</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">女鞋</a>
                                            <span class="line">/</span>
                                            <a href="">男鞋</a>
                                            <span class="line">/</span>
                                            <a href="">箱包</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">母婴</a>
                                            <span class="line">/</span>
                                            <a href="">童装</a>
                                            <span class="line">/</span>
                                            <a href="">玩具</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">男装</a>
                                            <span class="line">/</span>
                                            <a href="">户外运动</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">美妆</a>
                                            <span class="line">/</span>
                                            <a href="">彩妆</a>
                                            <span class="line">/</span>
                                            <a href="">个护</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">手机</a>
                                            <span class="line">/</span>
                                            <a href="">数码</a>
                                            <span class="line">/</span>
                                            <a href="">企业</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">大家电</a>
                                            <span class="line">/</span>
                                            <a href="">生活电器</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">零食</a>
                                            <span class="line">/</span>
                                            <a href="">生鲜</a>
                                            <span class="line">/</span>
                                            <a href="">茶酒</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">厨具</a>
                                            <span class="line">/</span>
                                            <a href="">收纳</a>
                                            <span class="line">/</span>
                                            <a href="">清洁</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">家纺</a>
                                            <span class="line">/</span>
                                            <a href="">家饰</a>
                                            <span class="line">/</span>
                                            <a href="">鲜花</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">图书音像</a>
                                            <span class="line">/</span>
                                            <a href="">文具</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">医药保健</a>
                                            <span class="line">/</span>
                                            <a href="">进口</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">汽车</a>
                                            <span class="line">/</span>
                                            <a href="">二手车</a>
                                            <span class="line">/</span>
                                            <a href="">用品</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">房产</a>
                                            <span class="line">/</span>
                                            <a href="">装修家具</a>
                                            <span class="line">/</span>
                                            <a href="">建材</a>
                                            <span class="arrow">></span>
                                        </li>
                                        <li>
                                            <a href="">手表</a>
                                            <span class="line">/</span>
                                            <a href="">眼镜</a>
                                            <span class="line">/</span>
                                            <a href="">珠宝饰品</a>
                                            <span class="arrow">></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="nav_center">
                                    <ul class="top">
                                        <li>天猫</li>
                                        <li>聚划算</li>
                                        <li>天猫超市</li>
                                        <li>|</li>
                                        <li>司法拍卖</li>
                                        <li>飞猪旅行</li>
                                        <li>天天特卖</li>
                                        <li>淘小铺</li>
                                        <div class="clear"></div>
                                    </ul>
                                    <!-- 轮播图 -->
                                    <div class="viewpager">
                                        <img src="./img/viewpager.jpg" alt="">
                                    </div>
                                    <!-- 商品推荐 -->
                                    <div class="introduction">
                                        <div class="title">
                                            <p class="left"><span style="font-size: 14px; margin-right: 5px;">TMALL天猫</span>理想生活上天猫</p>
                                            <p class="right"><span>1</span>/5</p>
                                            <div class="clear"></div>
                                        </div>
                                        <img class="left" src="./img/pic1.jpg" alt="">
                                        <img class="left" src="./img/pic2.jpg" alt="">
                                        <div class="clear"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="nav_right">
                                    <div class="member">
                                        <div class="member_pic">
                                            <img src="./img/t.jpg" alt="">
                                        </div>
                                        <span>Hi！你好</span>
                                        <div class="member_option">
                                            <a href="">领淘金币抵钱</a>
                                            <a href="">会员俱乐部</a>
                                        </div>
                                    </div>
                                    <div class="operation">
                                        <a href="">登录</a>
                                        <a href="">注册</a>
                                        <a href="">开店</a>
                                    </div>
                                    <img src="./img/bg1.jpg" alt="">
                                    <ul class="notice">
                                        <li>公告</li>
                                        <li>规则</li>
                                        <li>安全</li>
                                        <li>公益</li>
                                        <li>千牛</li>
                                        <div class="clear"></div>
                                    </ul>
                                    <ul class="mod">
                                        <li>阿里公益“奥斯卡”</li>
                                        <li>阿里公益论坛</li>
                                        <div class="clear"></div>
                                    </ul>
                                    <ul class="list">
                                        <li>充话费</li>
                                        <li>旅行</li>
                                        <li>车险</li>
                                        <li>游戏</li>
                                        <li>彩票</li>
                                        <li>电影</li>
                                        <li>酒店</li>
                                        <li>理财</li>
                                        <div class="clear"></div>
                                    </ul>
                                    <h3>阿里APP<span>更多></span></h3>
                                    <ul class="app">
                                        <li><img src="./img/淘宝.jpg" alt=""></li>
                                        <li><img src="./img/天猫.jpg" alt=""></li>
                                        <li><img src="./img/支付宝.jpg" alt=""></li>
                                        <li><img src="./img/钉钉.jpg" alt=""></li>
                                        <li><img src="./img/淘小铺.jpg" alt=""></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 有好货 -->
                <div class="content">
                    <div class="container">
                        <div class="title">有好货<img src="./img/title.png" alt=""></div>
                        <div class="row goodStuff">
                            <div class="col-md-3">
                                <img src="./img/c1.jpg" alt="">
                                <h4>Pure Cashmere 保暖针织帽</h4>
                                <p>这款针织帽风格休闲可爱，帽口双面装饰设计，非常有层次感，带上也会更舒服，简约的外型，柔软的纯羊绒面料，既美观又保暖。</p>
                            </div>
                            <div class="col-md-3">
                                <img src="./img/c2.jpg" alt="">
                                <h4>二胎家庭都在用这种床</h4>
                                <p>软床质量很好很高档，很喜欢外观高档，工艺精湛，气味不大，直观上有档次，厚重。</p>
                            </div>
                            <div class="col-md-3">
                                <img src="./img/c3.jpg" alt="">
                                <h4>周大福 简约蛇骨链</h4>
                                <p>极简风格，雅致大气人人皆可驾驭。</p>
                            </div>
                            <div class="col-md-3">
                                <img src="./img/c4.jpg" alt="">
                                <h4>凯蒂猫的新手机功能真多</h4>
                                <p>Hello，亲爱的小朋友们！今天让我们和爸爸妈妈一起来玩新玩具吧。我们的凯蒂猫又有一台崭新的手机啦，你们看！功能真多呢，还能拍照呢！</p>
                            </div>
                        </div>
                        <!-- 广告 -->
                        <div class="row adv">
                            <div class="col-md-4">
                                <img src="./img/a1.jpg" alt="">
                            </div>
                            <div class="col-md-4">
                                <img src="./img/a2.jpg" alt="">
                            </div>
                            <div class="col-md-4">
                                <img src="./img/a3.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </article>
    </div>



</body>

</html>